<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 登录页css 需要通过服务器请求-->
    <link rel="stylesheet" href="/css/login.css"/>
</head>
<body>
<div id="app">
    <div class="wrapper">
        <div class="type">
            <!-- 左边图片 -->
            <div class="bg-type">
                <div class="logo">
                    <div class="logo-img">
                        <img src="/images/icon.png"/>
                    </div>
                    <div class="title">PM人事管理系统</div>
                </div>
                <div class="img">
                    <img src="/images/bg.svg"/>
                </div>
            </div>
            <!-- 右边表单 -->
            <div class="login-type">
                <div class="login-font">
                    <b>登 录 账 号</b>
                </div>
                <!-- 账号 -->
                <el-form :model="user" :rules="rules" ref="userForm">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-s-custom" v-model="user.username" clearable></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input borde="flase" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
                    </el-form-item>
                    <!-- 记住密码 -->
                    <el-form-item>
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </el-form-item>
                    <!-- 登录 -->
                    <el-form-item class="login-button">
                        <div @click="login">登录</div>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                // 判断 本地有没有存储信息，有就解出来 ，没有就为空
                username: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : '',
                password: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : '',
            },
            rules: {
                username: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                ]
            },
            checked: localStorage.getItem("check") ? JSON.parse(localStorage.getItem("check")) : '' ,// 默认不记住密码
            logData : {// 日志信息 (公用)
                operator: '',
                logType: '',
                recordTime: '',
                operatorIP: "192.168.2.21",
                requestType: '',
                requestInterface: '',
                requestParameters: '',
                responseType: '',
                resdata:'',
                error:''
            },
        },
        methods: {
            login() {
                this.$refs["userForm"].validate(valid => {
                    if (valid) {
                        // 表单校验合法
                        axios.post("/user/login", this.user)
                            .then(res => {
                              if (res.data){
                                  this.$message({message: '登录成功！', type: 'success'});
                                  // 通过本地存储设置 记住密码 功能
                                  localStorage.setItem("user", JSON.stringify(this.user.username)); // 存储用户账号信息到浏览器
                                  localStorage.setItem("check", JSON.stringify(this.checked)); // 存储是否记住信息到浏览器
                                  if (this.checked){
                                      localStorage.setItem("menus", JSON.stringify(this.user.password)); // 存储用户密码信息到浏览器
                                  }else{
                                      localStorage.removeItem("menus") // 删除掉密码的密钥
                                  }
                                  // 跳转
                                  setTimeout(() => {
                                      window.location.href = "/";
                                  }, 500);
                                  // 访问请求的相关信息,写进日志
                                  this.getLog(res);
                                  console.log(this.logData)
                                  axios.post('/log', {  ...this.logData, logType: '登录日志'} )
                              }else{
                                  this.$message.error('账号密码不正确！请联系管理员');
                                  // 访问请求的相关信息,写进日志
                                  this.getLog(res);
                                  axios.post('/log', {  ...this.logData, logType: '登录错误',responseType:''} )
                              }
                        });
                    }
                });
            },
            // 从接口的res 获取日志 (公用）
            getLog(res){
                this.logData.operator = this.user.username, // 操作者
                this.logData.recordTime = new Date().toLocaleString(), // 记录时间
                // this.logData.operatorIP = 操作者ip
                this.logData.requestType = res.config.method; // 请求类型
                this.logData.requestInterface = '/api'+ res.config.url;// 请求URL
                this.logData.requestParameters = res.config.data; // 请求参数
                this.logData.responseType = res.headers['content-type'];// 实体主体的媒体类型
                if(res.data){ // 响应参数
                    this.logData.resdata = JSON.stringify(res.data).substring(0, 5000);// 数组转成字符串，最大写入量5000
                    this.logData.error=''
                }else{ // 错误信息
                    this.logData.resdata =''
                   this.logData.error =  JSON.stringify(res).substring(0, 5000)
                }
            },
        }
    });
</script>